feat: Add skeleton loading support to table#4583
Merged
Merged
Conversation
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
6681d62 to
465f073
Compare
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
465f073 to
58e6f84
Compare
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
58e6f84 to
14ad9b9
Compare
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
14ad9b9 to
fa974ca
Compare
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
fa974ca to
b98f8db
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4583 +/- ##
=======================================
Coverage 97.50% 97.50%
=======================================
Files 947 948 +1
Lines 30248 30262 +14
Branches 11021 11027 +6
=======================================
+ Hits 29493 29507 +14
Misses 708 708
Partials 47 47 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
b98f8db to
290be8c
Compare
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
290be8c to
99a42fb
Compare
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
99a42fb to
822f331
Compare
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
822f331 to
69c7893
Compare
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
362e123 to
03018d3
Compare
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
03018d3 to
ae6d4fa
Compare
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
ae6d4fa to
00a8498
Compare
NathanZlion
reviewed
Jun 9, 2026
NathanZlion
reviewed
Jun 9, 2026
| </td> | ||
| </tr> | ||
| {Array.from({ length: skeleton.totalRows }, (_, rowIndex) => ( | ||
| <SkeletonRow |
Member
There was a problem hiding this comment.
This block and the one below look similar and have a lot in common, can we extract them to avoid repetetion.
NathanZlion
reviewed
Jun 9, 2026
| {Array.from({ length: Math.max(0, skeleton.totalRows - allItems.length) }, (_, rowIndex) => ( | ||
| <SkeletonRow | ||
| key={`skeleton-row-${rowIndex}`} | ||
| rowIndex={rowIndex + 1} |
Member
There was a problem hiding this comment.
I don't understand 1 here to the rowIndex?
Member
Author
There was a problem hiding this comment.
updated the naming so it's clearer what's going on
NathanZlion
reviewed
Jun 9, 2026
| resizableColumns, | ||
| colIndexOffset, | ||
| }: SkeletonRowProps) { | ||
| const isFirstRow = rowIndex === 0; |
Member
There was a problem hiding this comment.
Following up: https://github.com/cloudscape-design/components/pull/4583/changes#r3379168550
If we do the +1 to row index then I think this would not be true
Member
Author
There was a problem hiding this comment.
it can be true in the other code path (when only skeleton rows are displayed), but have updated naming so hopefully the logic is clearer now
Add skeleton prop ({ totalRows: number }) that renders skeleton placeholder
rows to fill the table while data is loading.
- skeleton.totalRows defines total visible rows (typically page size)
- Skeleton rows rendered = max(0, totalRows - items.length)
- Standard loading: items=[] + loading=true + skeleton -> all skeleton rows
- Progressive loading: items=[partial] + skeleton -> real rows + trailing skeleton
- A11y: visually-hidden row with ScreenreaderOnly loadingText before skeleton rows
- Skeleton rows use aria-hidden=true
- Includes interactive demo pages for both patterns
gethinwebster
force-pushed
the
dev-v3-gethinw-table-skeleton
branch
from
00a8498 to
ff19e2c
Compare
NathanZlion
approved these changes
Jun 9, 2026
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
jperals
pushed a commit
that referenced
this pull request
Jun 11, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add skeleton prop ({ totalRows: number }) that renders skeleton placeholder rows to fill the table while data is loading.
Description
Related links, issue #, if available: n/a
How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.